<style>
    .ivu-badge-count{
        background: #2082e7
    }
    .checkboxitem{
        float: left;
        width: 280px;
        margin: 0 10px 10px;
    }
</style>
<template>
    <div class="m-25 mt-65">
        <div class="normal-box-mod">
            <div class="normal-box-hd clearfix">
                <div class="normal-box-title">
                    <div class="decorate-square"></div>
                    <h2>代码生成</h2>
                </div>
            </div>
            <div class="normal-box-bd">
                <div class="normal-list-page-mod">
                    <div class="normal-list-page-hd clearfix">
                        <Button type="primary" size="large" icon="plus-circled" @click="buildAndDownloadHandle" class="fr">打包下载</Button>
                    </div>
                </div>

                <Tabs value="name1" @on-click="tabsChangeHandle">
                    <TabPane :label="label1" name="name1">
                        <RadioGroup v-model="modals.Entity.formData.dataSourceId" vertical @on-change="selectDataSourceHandle">
                            <Radio :label="item.id" v-for="item in dataSourceList" :value="item.id" :key="item.id" >
                                <span>{{item.name}}</span>
                            </Radio>
                        </RadioGroup>
                    </TabPane>
                    <TabPane :label="label2" name="name2">
                        <div style="border-bottom: 1px solid #e9e9e9;padding-bottom:6px;margin-bottom:6px;">
                            <Checkbox
                                    :indeterminate="indeterminate"
                                    :value="checkAll"
                                    @click.prevent.native="handleCheckAll">全选/取消</Checkbox>
                        </div>
                        <div class="clearfix">
                            <CheckboxGroup v-model="modals.Entity.formData.checkedTables">
                                <div class="checkboxitem" v-for="(item,index) in tables">
                                    <Checkbox :label="item"  :value="item" :key="index">
                                        <Icon type="social-twitter"></Icon>
                                        <span>{{item}}</span>
                                    </Checkbox>
                                </div>
                            </CheckboxGroup>
                        </div>
                    </TabPane>
                    <TabPane :label="label3" name="name3">
                        <RadioGroup v-model="modals.Entity.formData.templateSourceGroupId" vertical>
                            <Radio :label="item.id" v-for="item in templateGroupList" :value="item.id" :key="item.id" >
                                <span>{{item.name}}</span>
                            </Radio>
                        </RadioGroup>
                    </TabPane>
                    <TabPane :label="label4" name="name4">
                        <Form ref="SettingFroms" :model="modals.Entity.formData.settingObjects" :rules="modals.Entity.rules" >
                            <FormItem :label="item.label" :label-width="250" v-for="(item,index) in dynamicVariable" :key="index" :prop="item.paramName" >
                                <Input v-model="modals.Entity.formData.settingObjects[item.paramName]" style="width:300px;"/>
                            </FormItem>
                        </Form>
                    </TabPane>
                </Tabs>
            </div>
        </div>
    </div>
</template>
<script>
import {
  ajaxGetEntity,
  ajaxPostEntity,
  ajaxPutEntity,
  ajaxDelEntity,
  ajaxGetAllEntity2
} from '@/api/generine/template_group.js'

import {
  ajaxGetAllEntity,
  ajaxShowTables,
  ajaxBuildCode,
  ajaxDownloadCode
} from '@/api/generine/data_source.js'
import { ajaxTemplatesByGroupId } from '@/api/generine/template.js'
import moment from 'moment'
import { Message } from 'iview'

export default {
  name: 'Entity',
  data () {
    return {
      indeterminate: false,
      checkAll: false,
      current: 0,
      dataSourceList: null,
      tables: null,
      templateGroupList: null,
      dynamicVariable: [],
      isSettingClick: false,
      name4click: false,
      // 弹出层数据
      modals: {
        Entity: {
          downloadFilename: '',
          loading: true,
          type: 'create', // create 新建，update 修改
          title: '新建',
          rules: {
          },
          formData: {
            objectid: undefined,
            dataSourceId: '',
            checkedTables: [],
            templateSourceGroupId: '',
            settingObjects: {},
            name: '',
            memo: ''
          }
        }
      },
      // 页面查询数据
      queryData: {
        limit: 10,
        page: 1,
        totalRecord: 0,
        tables: '',
        name: ''
      },
      label1: (h) => {
        return h('div', [
          h('span', '数据源'),
          h('Badge', {
            props: {
              count: 1
            }
          })
        ])
      },
      label2: (h) => {
        return h('div', [
          h('span', '数据表'),
          h('Badge', {
            props: {
              count: 2
            }
          })
        ])
      },
      label3: (h) => {
        return h('div', [
          h('span', '模板分组'),
          h('Badge', {
            props: {
              count: 3
            }
          })
        ])
      },
      label4: (h) => {
        return h('div', [
          h('span', '参数配置'),
          h('Badge', {
            props: {
              count: 4
            }
          })
        ])
      }
    }
  },
  methods: {
    buildAndDownloadHandle () {
      if (this.modals.Entity.formData.dataSourceId == '') {
        this.$Message.error('请选择数据源后再试^_^')
      } else if (this.modals.Entity.formData.checkedTables.length == 0) {
        this.$Message.error('请选择数据表后再试^_^')
      } else if (this.modals.Entity.formData.templateSourceGroupId == '') {
        this.$Message.error('请选择模板分组后再试^_^')
      } else if (this.isSettingClick == false) {
        this.$Message.error('请配置参数配置后再试^_^')
      } else {
        this.$refs['SettingFroms'].validate(valid => {
          if (valid) {
            this.queryData.tables = this.modals.Entity.formData.checkedTables.join(',')
            this.handleFinishSetting()
            ajaxBuildCode(this.queryData).then(response => {
              if (response.code == 0) {
                var data = response.data
                var das = data.split('#')
                console.log(das)
                this.modals.Entity.downloadFilename = das[0] + '/generine/dataSource/download?fileName=' + das[1]
                window.location.href = this.modals.Entity.downloadFilename
              }
            })
            this.handleDownload()
          } else {
            this.$Message.error('请完善参数配置选项后再试^_^')
          }
        })
      }
    },
    // 切换tabs
    tabsChangeHandle (value) {
      if (value == 'name4' && this.name4click == false) {
        this.isSettingClick = true
        this.name4click = true
        this.handleLoadSetting()
      }
    },
    // 获取数据源列表
    getDatasourceList () {
      const that = this
      that.queryData.totalRecord = undefined
      ajaxGetAllEntity(this.queryData).then(response => {
        this.dataSourceList = response.data
      })
    },
    // 选择数据源
    selectDataSourceHandle (value) {
      if (this.modals.Entity.formData.dataSourceId > 0) {
        this.listTables()
      }
    },
    // 获取数据表
    listTables () {
      const that = this
      that.queryData.totalRecord = undefined
      that.queryData.id = this.modals.Entity.formData.dataSourceId
      that.queryData.dataSourceId = this.modals.Entity.formData.dataSourceId
      ajaxShowTables(that.queryData).then(response => {
        this.tables = response.data
      })
    },
    // 全选数据表
    handleCheckAll () {
      if (this.indeterminate) {
        this.checkAll = false
      } else {
        this.checkAll = !this.checkAll
      }
      this.indeterminate = false
      if (this.checkAll) {
        this.modals.Entity.formData.checkedTables = this.tables
      } else {
        this.modals.Entity.formData.checkedTables = []
      }
    },
    // 获取模板分组
    getTemplatesList () {
      ajaxGetAllEntity2(this.queryData).then(response => {
        this.templateGroupList = response.data
      })
    },
    handleLoadSetting () {
      const that = this
      that.queryData.groupId = that.modals.Entity.formData.templateSourceGroupId
      ajaxTemplatesByGroupId(that.queryData).then(response => {
        this.dynamicVariable = response.data
        const templateItmes = response.data
        for (var key in templateItmes) {
          this.modals.Entity.formData.settingObjects[templateItmes[key].paramName] = templateItmes[key].defaultValue
          const a = [
            {
              required: true,
              message: '请填写' + templateItmes[key].label,
              trigger: 'blur'
            }
          ]
          this.modals.Entity.rules[templateItmes[key].paramName] = a
        }
        // a.forEach(element => {
        //     this.modals.Entity.formData.settingObjects[element.paramName] = element.defaultValue;
        //     const a = [
        //         {
        //             required: true,
        //             message: "请填写" + element.label,
        //             trigger: "blur"
        //         }
        //     ]
        //     this.modals.Entity.rules[element.paramName] = a;
        // });
      })
    },
    handleFinishSetting () {
      var settingObjects = this.modals.Entity.formData.settingObjects
      var commitQuery = this.queryData
      Object.keys(settingObjects).forEach(function (key) {
        commitQuery[key] = settingObjects[key]
      })
      this.queryData = commitQuery
    },

    handleDownload () {
      this.modals.Entity.downloadFormVisible = false
    }
  },
  created () {
    // this.getTableData();
    this.getDatasourceList()
    this.getTemplatesList()
  }
}
</script>
